<template>
	<view class="container">
		<topbar>
			<view class="now-field-area" @click="changeShowSelectFieldAreaPopup">
				<text>{{nowFieldAreaText}}</text>
				<image class="icon" src="/static/img/common/select.png"></image>
			</view>
		</topbar>
		<!-- 选择厂区弹窗 -->
		<SelectFieldAreaPopup v-if="isShowSelectFieldAreaPopup" :now-field-area-id="nowFieldAreaId"
			:field-area-list="fieldAreaList" @changeArea="changeArea" />
		<!-- 日期选择 -->
		<DateSelect class="date-select-box" @changeDate="changeDate" />
		<!-- 收料-出料-总计 -->
		<MaterialTotal class="content" :now-field-area="nowFieldAreaId" />
		<!-- 签收管理统计 -->
		<SignStatistics class="content" />
		<!-- 资源化处置场运力统计 -->
		<CompanyStatistics class="content" />
	</view>
</template>

<script setup lang="ts">
	import SelectFieldAreaPopup from '@/components/consumptionAdmin/selectFieldAreaPopup/selectFieldAreaPopup.vue';
	import SignStatistics from '@/components/consumptionAdmin/signStatistics/signStatistics.vue';
	import DateSelect from '@/components/consumptionAdmin/dateSelect/dateSelect.vue';
	import MaterialTotal from '@/components/consumptionAdmin/materialTotal/materialTotal.vue';
	import CompanyStatistics from '@/components/consumptionAdmin/companyStatistics/companyStatistics.vue';
	import {
		computed,
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	onLoad((options) => {
		if (options.id) {
			nowFieldAreaId.value = options.id
		}
	})
	// 是否显示选择区域弹窗
	const isShowSelectFieldAreaPopup = ref(false)
	// 当前区域id
	const nowFieldAreaId = ref('4')
	// 当前区域文字
	const nowFieldAreaText = computed(() => {
		let nowItem = fieldAreaList.find(item => item.value === nowFieldAreaId.value)
		return nowItem && nowItem.label
	})
	// 4--原料区  5--生产区  6--成品区
	const fieldAreaList = [{
		label: '原料区统计',
		value: '4',
	}, {
		label: '生产区统计',
		value: '5',
	}, {
		label: '成品区统计',
		value: '6',
	}]
	// 改变是否显示区域弹窗
	const changeShowSelectFieldAreaPopup = () => {
		isShowSelectFieldAreaPopup.value = !isShowSelectFieldAreaPopup.value
	}
	// 改变区域
	const changeArea = (id) => {
		if (id) {
			nowFieldAreaId.value = id
		}
		changeShowSelectFieldAreaPopup()
	}
	// 修改日期
	const changeDate = () => {

	}
</script>

<style scoped lang="scss">
	.now-field-area {
		display: flex;
		align-items: center;

		.icon {
			margin-left: 10rpx;
			width: 28rpx;
			height: 20rpx;
		}
	}

	.container {
		position: relative;
	}

	.up-dropdown {
		position: absolute;
		top: 108rpx;
		left: 0;
		width: 100vw;

		.u-dropdown__menu__item__text {
			color: #0E1624;
			font-size: 32rpx;
			font-weight: bold;

		}
	}

	.date-select-box {
		margin: 0;
		margin-bottom: 12rpx;
		width: 100vw;
		border-radius: 0;
	}

	.content {
		margin: 20rpx 32rpx 0rpx;
		padding: 26rpx 24rpx;
		border-radius: 32rpx;
		background-color: #fff;

	}
</style>